<template>
    <!--v-loading 数据加载中的提示-->
    <div
            v-loading="globalLoading"
            element-loading-text="正在添加..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <!-- 添加角色输入框  <template slot="prepend">ROLE_</template> 这个是可以带前缀的-->
        <div class="permissManaTool">
            <el-input size="small" placeholder="请输入角色英文名" v-model="role.name">
                <template slot="prepend">ROLE_</template>
            </el-input>
            <el-input size="small" placeholder="请输入角色中文名" v-model="role.nameZh"  @keydown.enter.native="doAddRole" ></el-input>
            <el-button type="primary" size="small" icon="el-icon-plus"  @click="doAddRole" >添加角色</el-button>
        </div>

        <div style="margin-top: 10px;width: 700px">
            <!-- 折叠面板  @change="change"点击某一行触发的事件  这里是查询对应的资源数据  accordion-->
            <!--<el-collapse v-model="activeName"  @change="change">-->
                <el-collapse   accordion @change="change" v-model="activeName">
                <!-- element-ui 折叠面板 手风琴模式 只展开一个 activename=-1则不展开 等于1则展开第一个 -->
                <el-collapse-item  :title="r.nameZh" :name="r.id" v-for="(r,index) in roles" :key="index">

                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span>可访问的资源</span>
                            <!--删除角色触发事件-->
                            <el-button style="float: right; padding: 3px 0;color: red" type="text" icon="el-icon-delete"  @click="deleteRole(r)"></el-button>
                        </div>
                        <!-- show-checkbox 显示勾选框 -->
                        <!-- ref="tree" 相对于取了个名字，待会根据这个名字就可以查找这个元素  el-tree树形结构 -->
                     <!--  default-checked-keys 默认选中的节点。需要注意的是，此时必须设置node-key  这两个字段可以控制选中状态-->
                        <div>
                            <el-tree
                                    show-checkbox
                                    :data="allMenus"
                                    node-key="id"
                                    ref="tree"
                                    :key="index"
                                    :default-checked-keys="selectedMenus"
                                    :props="defaultProps" ></el-tree>
                        </div>

                        <div style="display: flex;justify-content: flex-end">
                            <el-button size="small"  @click="cancelUpdate">取消修改</el-button>
                            <el-button size="small" type="primary" @click="doUpdate(r.id,index)">确认修改</el-button>
                        </div>

                    </el-card>



                </el-collapse-item>



            </el-collapse>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PermissMana",
        data(){
            return {
                globalLoading:false,
                role:{  //添加角色数据
                    name:'',
                    nameZh:''
                },
               // activeName:'2',  //折叠面板 默认打开哪一个
                roles:[],  //角色数据
                allMenus:[], //所有菜单数据
                defaultProps: {   //绑定结点的数据   树形结构需要配置
                    children: 'children',
                    label: 'name'
                },
                selectedMenus:[], //选中的菜单项
                activeName:-1,  //折叠面板 -1表示不展开
            }
        },
        mounted() {
            this.initRoles();  //一进入页面就调用获取角色的方法
        },
        methods:{
            //删除角色
            deleteRole(role){
                this.$confirm('此操作将永久删除【' + role.nameZh + '】角色, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest("/system/basic/permiss/role/" + role.id).then(resp=>{
                        if (resp) {
                            this.initRoles();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //添加角色
            doAddRole(){
                if (this.role.name && this.role.nameZh) {
                    this.globalLoading=true;
                    this.postRequest("/system/basic/permiss/role", this.role).then(resp => {
                        this.globalLoading=false;
                        if (resp) {
                            this.role.name = '';
                            this.role.nameZh = '';
                            this.initRoles();
                        }
                    })
                }else {
                    this.$message.error("数据不可以为空")
                }
            },
            //取消修改，然后收起折叠面板
            cancelUpdate(){
                this.activeName=-1;
            },
            //更新操作
            doUpdate(rid,index){
                //获取结点值
                let tree = this.$refs.tree[index];
                //为true时表示返回目前被选中节点的key所组成的数组   这是得到所有的二级菜单的值
                let selectKeys = tree.getCheckedKeys(true);
                console.info("selectKeys:"+selectKeys)
                let url = '/system/basic/permiss/?rid=' + rid;
                selectKeys.forEach(key=>{
                    url += '&mids=' + key;
                })
                this.putRequest(url).then(resp=>{
                    if (resp) {
                        //更新完成后收起折叠面板
                        this.activeName=-1;
                    }
                })

            },
            //折叠面板点击事件，展开时加载数据
            change(rid){
                console.info("折叠面板点击事件，展开时加载数据"+rid);
                if(rid){
                    this.initAllMenus(); //加载所有菜单项
                    this.initSelectedMenus(rid);  //加载角色用户的菜单项，用户默认勾选  查询默认选中的值
                }
            },
            //获取某个角色拥有的菜单数据 用于显示勾中状态
            initSelectedMenus(rid){
                this.getRequest("/system/basic/permiss/mids/"+rid).then(resp=>{
                    if (resp) {
                        this.selectedMenus = resp;
                    }
                })
            },
            //获取所有菜单
            initAllMenus(){
                console.info("获取所有菜单");
                this.getRequest("/system/basic/permiss/menus/").then(resp=>{
                    if(resp){
                        this.allMenus = resp;
                    }
                })

            },
            //获取角色
            initRoles(){
                this.getRequest("/system/basic/permiss/").then(resp=>{
                    if (resp) {
                        this.roles=resp;
                    }
                })
            }
        }
    }
</script>

<style>
    /* 添加输入框的样式 */
    .permissManaTool{
        display: flex;
        justify-content: flex-start;
    }
    .permissManaTool .el-input{
        width: 300px;
        margin-right: 10px;
    }
</style>